<script setup lang="ts">

const option = {
  color: ['#267dde', '#2cb8e5', '#32f4ec'],
  xAxis: {
    type: 'value',
    axisLabel: {
      color: '#666',
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        type: 'dashed',
      },
    },
    label: {
      show: false,
    },
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      color: '#666',
      fontSize: 8,
      rotate: 45,
      min: 10,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#666',
      },
    },
    axisLine: {
      lineStyle: {
        type: 'dashed',
      },
    },
    label: {
      show: false,
    },
    data: ['A类别', 'B类别', 'C类别', 'D类别', 'F类别'],
  },
  series: [
    {
      name: '优',
      type: 'bar',
      stack: 'total',
      barWidth: 10,
      data: [502, 947, 326, 311, 327],
    },
    {
      name: '中',
      type: 'bar',
      stack: 'total',
      data: [635, 340, 406, 633, 476],
    },
    {
      name: '差',
      type: 'bar',
      stack: 'total',
      data: [809, 363, 407, 321, 963],
    },
  ],
};
</script>

<template>
  <v-chart
    class="chart"
    :option="option"
    autoresize
  />
</template>

  <style scoped>

  </style>
